<template>
	<view>
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="今日价格"  :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<view slot="right"></view>
		</u-navbar>
		<!-- <view class="bf p20">
			<u-search placeholder="请输入" v-model="keyword" :showAction='false' searchIconColor='var(--theme)'></u-search>
		</view> -->
		<!-- <view class="c9 f28 p20">
			今日价格
		</view> -->
		 <view class="menuBox m20 ">
			 <view class="f-w-b mb20">
			 	 <view class="f-f-c-c p10 b-rd b-s f28 c9 mt10" style="width: 23%;;margin:0 1% 20rpx;"
				  v-for="item,ix in menulist" :key="ix"
				  :class="selindex == ix ? 'active' :'' "
				  @click='changeMenu(item.childCategorizeVoList,ix)'
				  >
			 	 	<image :src="item.imgUrl" style="width: 100rpx;height: 100rpx" mode=""></image>
			 	    <span >{{item.name}}</span>
				 </view>
			 </view>
			<scroll-view  :scroll-top="scrollTop"  class="scroll-content-container" :style="{height:scrollerHeight}"  scroll-y >
			  <block>
				<view class="menuRight f-f-c">
					<view class="p20 c6 f28 menuitem f-s-b" v-for="item,index in menuItmeList" :key="index">
						<span class="">{{item.name}}</span>
						<span v-if='item.priceType == 0'>
							<span class="cr">{{item.price}}元</span>/{{item.unit}}
						</span>
						<span v-else>
							议价
						</span>
						
					</view>
					 
				</view>
				
			</block>
			</scroll-view>
			
		 </view>
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				menulist:[
					{name:'纸',},
					{name:'纺织物',},
					{name:'电器电子',},
					{name:'金属',},
					
				],
				menuItmeList:[
					{name:'销售订单',},
					{name:'销售单',},
					{name:'销售退货单',},
					{name:'报价单',},
					{name:'销售开票',},
					{name:'开票历史',},
					{name:'零售历史',},
					{name:'收银历史',},
					{name:'销售明细',},
					{name:'订单明细',},
					
				],
				selindex:0,
				scrollerHeight: 0,
				swiperContentHeight: 0,
				scrollTop:9999999,
				num:1,
			}
		},
		onLoad() {
			
		},
		onShow() {
			// this.getdata()
			this.getScollHeight()
			this.getData()
		},
		onReady() {
			
		},
		methods: {
			
			getData(){
				let that = this
				this.$api.request('get', 'categorize/app/allList').then(res => {
					console.log(res.data)
					this.menulist = res.data
					that.changeMenu( that.menulist[0].childCategorizeVoList,0)
				    // console.log(this.arrList,'this.arrList')
				})
			},
			// 设置scoll高度
			getScollHeight(){
				let that = this
				uni.getSystemInfo({
					success: function (res) {
						let windowHeight= res.windowHeight;
						that.swiperContentHeight = (windowHeight-50 -150 ) + 'px';
						that.scrollerHeight = (windowHeight-50 - 150) + 'px'; // 给15px的底部间距然后还要减掉搜索位置高度
					}
				});
			},
			
			changeMenu(item,index){
			    let that = this
				this.selindex = index
				this.menuItmeList = item
				// this.menuItmeList = item.children
				// this.menuItmeList = this.menuItmeList.map((it2)=>{
				// 	it2.url = that.imgUrl + 'yinzi/' + it2.appLogo
				// 	return it2
				// })
			},
			
		},
		
	}
</script>

<style lang="scss"> 
    page{
		// background:red;
		background: #fafafa;
		
	}
   .menuBox{
	   // width: 100%;
	   min-height: calc(100vh - 288upx);
	   background: #fafafa;
	   display: flex;
	   flex-direction: column;
	   
	   
	  
   }
   .fixsure{
   	position: fixed;
   	bottom: 0;
   	left: 0;
   	width: 100vw;
   	height: 156rpx;
   	background: #FFFFFF;
   	box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.1);
   	border-radius: 8rpx 8rpx 8rpx 8rpx;
   	opacity: 1;
   }
   .btnsure{
   	width: 318rpx;
   	height: 90rpx;
   	background: var(--theme);
   	border-radius: 46rpx 46rpx 46rpx 46rpx;
   	text-align: center;
   	line-height: 90rpx;
   	color: #FFFFFF;
   }
   .menuitem{
	   border: 1px solid #ccc;
	   border-radius: 8px;
	   margin-bottom: 20rpx;
   }
   .active{
	   border: 1px solid var(--theme);
	   color: var(--theme);
   }
</style>
